<template>
    
        <v-dialog max-width="600" v-model="dialog">
            <template  v-slot:activator="{ on }">
                <v-btn v-on="on" text slot="activator" class="success"> Add new project</v-btn>
            </template>
            <v-card>
                <v-card-title>
                    <h2>Add a New Project</h2>
                </v-card-title>
                <v-card-text>
                    <v-form class="px-3" ref="form">
                        <v-text-field label="Title" v-model="title" prepend-icon="folder" :rules="inputRules"></v-text-field>
                        <v-textarea label="Information" v-model="content" prepend-icon="edit" :rules="inputRules"></v-textarea>
                        <v-menu>
                            <template v-slot:activator="{on}">
                                <v-text-field :value="due"  v-on="on" label="Due Date" prepend-icon="date_range" :rules="inputRules"></v-text-field>
                            </template>
                            <v-date-picker v-model="due"></v-date-picker>
                        </v-menu>
                        <v-btn text class="success mx-0 mt-3" @click="submit" :loading="loading">Add Project</v-btn>
                    </v-form>
                </v-card-text>
            </v-card>

        </v-dialog>
    

</template>

<script>
import format from 'date-fns/format'
import db from '@/firebase'
 
export default {
    data(){
        return{
            title:'',
            content: '',
            due: null,
            inputRules: [
                v =>v.length >=3 || 'Minimum length 3 characters'
            ],
            loading:false,
            dialog: false,
        }
    },
    methods:{
        submit(){
            if(this.$refs.form.validate()){
                this.loading = true;
                const project  = {
                    title: this.title,
                    content: this.content,
                    due: this.due,
                    person: 'Dave Davies',
                    status: 'ongoing'
                }
                db.collection('projects').add(project).then(()=>{
                 
                this.loading = false;
                this.dialog = false;
                this.$emit('projectAdded')
            })
            }
            
        }
    },
    computed: {
        formattedDate(){        
             
            //  var picker_date = Date(this.vue).toISOString()
            
             return this.due ? format(this.vue, 'Do MMM YYYY') : ''
        }
    }
}
</script>